<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;;
        }
    </style>
</head>
<body>
<script type="text/javascript">
//      绘制地图
    function Map(){
        //私有成员(不会随便发生变化)
        var w=800;
        var h=400;
        //成员方法，绘制地图
        this.showmap=function(){
            //创建div/设置css样式、追加给body
            var tu=document.createElement('div');
            tu.style.width=w+"px";
            tu.style.height=h+"px";
            tu.style.backgroundImage="url(./12.jpg)";
            document.body.appendChild(tu);
        }
    }
//      绘制食物
    function Food(){
        var len=20;
        //绘制
        this.showfood=function(){
            //创建div、设置 css样式、追加给body
            var piece=document.createElement('div');
            piece.style.width= piece.style.height=len+"px";
            piece.style.backgroundColor="green";
            //食物设置绝对定位(position)
            //食物位置随机摆放
            //移动步进值：20px;
            //食物可能会坐标：x轴(0-39) y轴(0-19)
            //食物真实坐标：权值坐标*步进值
            var xFood=Math.floor(Math.random()*40);//0-39的随机数
            var yFood=Math.floor(Math.random()*20);//0-19的随机数

            piece.style.position="absolute";
            piece.style.left=xFood*len+"px";
            piece.style.top=yFood*len+"px";
            document.body.appendChild(piece);
        }
    }
//      小蛇
    function Snake(){
        var len=20;
        this.redirect="right";
        //后期snakebody要变化，因此声明为公开的
        this.snakebody=[[0,1,'green'],[1,1,'green'],[2,1,'green'],[3,1,'red']];
        //绘制小蛇
        this.showsnake=function(){
            //遍历小蛇的各个蛇节，并依次创建即可
            for(var i=0;i<this.snakebody.length;++i){
                this.snakebody[i]//代表每个蛇节
                //创建蛇节div
                var jie=document.createElement('div');
                //设置 css样式(宽度、高度、颜色)
                jie.style.width=jie.style.height=len+"px";
                jie.style.backgroundColor=this.snakebody[i][2];
                //绝对定位
                jie.style.position="absolute";
                jie.style.left=this.snakebody[i][0]*len+"px";
                jie.style.top=this.snakebody[i][1]*len+"px";
                //把蛇节追加给body
                document.body.appendChild(jie);
            }
        };
        //移动小蛇
        this.movesnake=function(){
            //非蛇头蛇节(当前蛇节的新坐标是"下个蛇节"的旧坐标)
            for(var i=0;i<this.snakebody.length-1;++i){
                this.snakebody[i][0]=this.snakebody[i+1][0];
                this.snakebody[i][1]=this.snakebody[i+1][1];
            }
            if(this.redirect=="right"){
                //蛇头x坐标递增
                this.snakebody[this.snakebody.length-1][0]+=1;
            }
            if(this.redirect=="left"){
                //蛇头x坐标递减
                this.snakebody[this.snakebody.length-1][0]-=1;
            }
            if(this.redirect=="up"){
                //蛇头y坐标递减
                this.snakebody[this.snakebody.length-1][1]-=1;
            }
            if(this.redirect=="down"){
                //蛇头y坐标递增
                this.snakebody[this.snakebody.length-1][1]+=1;
            }
            //根据新坐标绘制小蛇
           this.showsnake();
        }
    }
window.onload=function(){
    var map=new Map();
    map.showmap();

    var food=new Food();
    food.showfood();

    snake=new Snake();
    snake.showsnake();

    //移动小蛇
    snake.movesnake();
    //setInterval(全局变量，时间);
    setInterval("snake.showsnake()",500);
};
</script>
</body>
</html>